import React, { Component } from "react";

export default class Event extends Component {
  constructor() {
    super();
    this.state = {
      num: 10,
    };
    this.add4 = this.add3.bind(this);
  }

  add = () => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  add2 = (n) => {
    console.log(n);
    this.setState({
      num: this.state.num + n,
    });
  };

  add3() {
    console.log(this);
    //普通函数
    this.setState({
      num: this.state.num + 1,
    });
  }

  add5(n,e){
    e.target.style.color= "red";
    this.setState({
        num:this.state.num+n
    })
  }
  render() {
    return (
      <div>
        Event
        <div>
          数据{this.state.num}
          <button
            onClick={() => {
              this.add();
            }}
          >
            修改
          </button>
          <button onClick={this.add}>修改2</button>
        </div>
        <div>
          数据{this.state.num}
          <button
            onClick={() => {
              this.add2(10);
            }}
          >
            修改
          </button>
          <button onClick={this.add2.bind(this, 100)}>修改2</button>
        </div>
        <hr />
        <div>
          数据{this.state.num}
          <button
            onClick={() => {
              this.add3();
            }}
          >
            修改
          </button>
          <button onClick={this.add3.bind(this)}>修改2</button>
          <button onClick={this.add4}>修改3</button>
        </div>
        <hr/>
        <button onClick={(e)=>{
            this.add5(10,e);
        }}>点击以后按钮变红色</button>
        <button onClick={this.add5.bind(this,100)}>普通绑定点击以后按钮变红色</button>
      </div>
    );
  }
}
